<template>
  <div class="role-management">
    <!-- 标题 -->
    <div class="block-header">
      <h2>角色管理</h2>
    </div>
    <!-- 搜索栏 -->
    <div class="fixed-table-toolbar">
      <div class="bs-bars">
        <!-- 搜索框 -->
        <!-- <input type="text" v-model="searchContent" class="form-control search" id="roleName" placeholder="角色名称" /> -->
        <input class="search" v-model="searchContent" type="text" placeholder="角色名称" />
        <!-- 搜索按钮 -->
        <el-button type="primary" icon="el-icon-search" :plain="true" @click="searchClick">搜索</el-button>
        <!-- 添加按钮 -->
        <el-button @click="addMember" type="primary" icon="el-icon-edit">添加</el-button>
      </div>
      <!-- 重置按钮 -->
      <el-button class="refresh" type="primary" icon="el-icon-refresh-right" @click="memberData"></el-button>
    </div>
    <!-- 表单 -->
    <el-table border height="330" :data="tableData" style="width: 100%">
      <el-table-column prop="role" label="角色名称" sortable min-width="120"></el-table-column>
      <el-table-column prop="superior" label="上级角色" sortable min-width="120"></el-table-column>
      <el-table-column prop="department" label="所在部门" sortable min-width="120"></el-table-column>
      <el-table-column prop="name" label="别名" sortable min-width="120"></el-table-column>
      <el-table-column label="操作" min-width="120" class="operation">
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            icon="el-icon-s-claim"
          ></el-button>
          <!-- 删除按钮 -->
          <el-button
            size="mini"
            type="danger"
            :plain="true"
            @click="handleDelete(scope.$index, scope.row)"
            icon="el-icon-delete"
          ></el-button>
          <!-- </a> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 遮罩层1 -->
    <div class="add" v-show="isShow">
      <!-- 添加成员弹出框 -->
      <div class="add-member">
        <add-member @send="send"></add-member>
      </div>
    </div>
    <!-- :before-close="handleClose" -->
    <!-- 删除按钮的弹出框 -->
    <div class="dialog">
      <el-dialog title="警告" :visible.sync="dialogVisible" width="30%">
        <span>此操作将永久删除该成员信息, 是否继续?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="yes">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 编辑信息 -->
    
    <div class="add" v-show="isShowUp">
      <!-- 添加成员弹出框 -->
      <div class="add-member">
        <update-member :upId="upId" @sends="sends"></update-member>
      </div>
    </div>
     <!-- @send1="send1" -->
  </div>
</template>

<script type="text/ecmascript-6">
import "../../assets/css/RoleManagement.css";
import AddMember from "./RoleManagement/AddMember.vue";
// 删除信息
// import DelMember from "./RoleManagement/DelMember.vue";
// 更改信息
import UpdateMember from "./RoleManagement/UpdateMember.vue";
export default {
  name: "",
  data() {
    return {
      // 表格数据
      tableData: [],
      searchContent: "",
      isShow: false,
      isShowUp: false,
      upId: 0,
      dialogVisible: false
    };
  },
  components: {
    AddMember,
    // DelMember,
    UpdateMember
  },
  methods: {
    // 编辑按钮
    handleEdit(index, row) {
      // 当前编辑的数据的id
      this.upId = row.Id;
      this.isShowUp = true;
    },
    // 删除按钮--发送请求-
    handleDelete(index, row) {
      // console.log(row.Id);
      this.dialogVisible = true;
      this.upId = row.Id;
    },
    yes() {
      this.dialogVisible = false;
      let Id = this.upId;
      this.$axios
        .get("/api/RoledelMember.php", {
          params: {
            Id
          }
        })
        .then(res => {
          if (res.data.code == 3000) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.memberData();
          }
          // console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 所有的成员信息
    memberData() {
      this.$axios
        .get("/api/RoleManagement.php")
        .then(res => {
          // console.log(res.data);
          this.tableData = res.data.list;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 查询成员信息
    searchClick() {
      let type1 = this.searchContent;
      if (type1) {
        // console.log(this.searchContent);
        this.$axios
          .get("/api/RoleSearchMember.php", {
            params: {
              type1
            }
          })
          .then(res => {
            console.log(res.data);
            this.tableData = res.data.list;
            if (res.data.code == 3000) {
              // 搜索成功时，让input的内容消失，搜索失败时不消失
              this.searchContent = "";
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$message({
          message: "请输入要查找的内容",
          type: "warning"
        });
      }
    },
    // 添加成员  弹出框
    addMember() {
      this.isShow = true;
    },
    // 子组件传来的数据
    send(res) {
      this.isShow = res;
    },
    sends(res) {
      this.isShowUp = res;
    }
  },
  created() {
    // 获取数据渲染页面
    this.memberData();
  }
};
</script>

<style lang="stylus" scoped>
.bs-bars >>> .el-button {
  padding: 8px 8px;
}

.fixed-table-toolbar >>> .refresh {
  padding: 4px 10px;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  font-size: 16px;
}

.el-button--default {
  border-radius: 50%;
  padding: 10px;
  font-size: 20px;
  background-color: #eee;
}

.el-button--danger {
  border-radius: 50%;
  padding: 10px;
  font-size: 18px;
}
</style>
